<template>
  <div style="min-height: 300px; border-bottom: 1px solid rgb(240, 240, 240); margin-bottom: 20px">
    <div class="list_th">
      <a-row style="padding-left: 10px">
        <a-col v-for="(item, index) in list_th" :key="index" :span="item.span">{{ item.title }} </a-col>
      </a-row>
    </div>
    <a-empty :image="simpleImage" v-show="!pagaData.length" />
    <div class="list_li" v-for="(item, index) in pagaData" :key="index">
      <a-row class="row_goods">
        <a-col v-for="(inner, index) in list_th" :key="index" :span="inner.span">
          <!-- 产品名称 -->
          <div v-if="inner.title == '产品名称' || inner.title == '商品信息'" style="margin-left: 10px">
            <a-row :gutter="12" style="margin-top: 6px">
              <a-col span="6">
                <img :src="item.goods.cover_pic" style="width: 80%; border-radius: 5px" />
              </a-col>
              <a-col span="18">
                <a-tooltip>
                  <template slot="title">
                    {{ item.name }}
                  </template>
                  <h4 class="over_e fw_b">{{ item.name }}</h4>
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">
                    {{ item.attr_str || '默认' }}
                  </template>
                  <div class="over_e">规格：{{ item.attr_str || '默认' }}</div>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>
          <!-- 分类/已出售量 -->
          <div v-if="inner.title == '分类/已出售量'">
            <div>
              <div>分类：{{ item.cat_name }}</div>
              <div>已出售量：{{ item.sales }}</div>
            </div>
          </div>
          <!-- 限制兑换数量 -->
          <div v-if="inner.title == '限制兑换数量'">
            <div>
              <div>{{ item.user_num }}</div>
            </div>
          </div>
          <!-- 所需积分 -->
          <div v-if="inner.title == '所需积分'">
            <div>
              <div>{{ item.integral }}</div>
            </div>
          </div>
          <!-- 状态 -->
          <div v-if="inner.title == '状态'">
            <a-switch
              checked-children="上架"
              un-checked-children="下架"
              :default-checked="item.status > 0"
              @change="statusChange($event, item.id)"
            />
          </div>
          <!-- 排序 -->
          <div v-if="inner.title == '排序'">
            <div>{{ item.sort }}</div>
          </div>
          <!-- 操作 -->
          <div v-if="inner.title == '操作'" style="padding-right: 10px" class="row_actions">
            <div>
              <a-button type="link" @click="$emit('triggerAction', 'order_edit', item)"> 编辑 </a-button>
              <a-button type="link" @click="$emit('triggerAction', 'delete', item)"> 删除 </a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { Empty } from 'ant-design-vue'
export default {
  props: {
    list_th: {
      type: Array,
      default: () => [],
    },
    pagaData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      reason: '',
    }
  },
  filters: {},
  computed: {},
  watch: {},
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
    statusChange(e, id) {
      this.$emit('statusChange', { flag: e, id })
    },
  },
}
</script>

<style scoped lang="less">
.plusIcon {
  cursor: pointer;
  transition: all 0.5s;
  &:hover {
    color: rgb(24, 144, 255);
  }
}
.fw_b {
  font-weight: bold;
}
.row_footer {
  border-top: 1px solid rgb(240, 240, 240);
  color: rgba(143, 143, 143);
  line-height: 50px;
}
.row_actions {
  /deep/.ant-btn-link {
    padding: 0 10px;
  }
}
.list_li {
  /deep/.ant-row {
    display: flex;
    align-items: center;
  }
  .row_goods {
    transition: all 0.5s;
  }
  .row_footer {
    transition: all 0.5s;
  }
  &:hover {
    .row_head {
      background: rgb(230, 247, 255);
    }
    .row_goods {
      background: rgb(230, 247, 255);
    }
    .row_footer {
      background: rgb(230, 247, 255);
    }
  }
}
.list_li:hover {
  background: rgb(230, 247, 255);
}
.row_goods {
  padding: 15px 0;
}
.over_e {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list_th {
  background: rgb(250, 250, 250);
  height: 50px;
  line-height: 50px;
  color: black;
}
.row_head {
  background: rgb(250, 251, 253);
  border-top: 1px solid rgb(240, 240, 240);
  padding: 10px 0;
  color: rgba(143, 143, 143);

  .order-num {
    user-select: none;
  }
}
</style>